<script setup lang="ts" >
import * as echarts from 'echarts';
import breadCrumb from '@/components/breadCrumb.vue'
import { ref, onMounted } from 'vue';
import { useUserStore } from '@/store/userinfo.js'
import { getCompanyName } from '@/api/set.js'
import SvgIcon from '@/components/SvgIcon.vue'
//面包屑
const item = ref({
    first: '系统概览',
})
//显示哪个图标
const iconName = ref({
    name: 'overview'
})
//顶
const overStore = useUserStore()
//获取公司名称
const companyName = ref('')
const getCompanyname = async () => {
    const res = await getCompanyName()
    companyName.value = res
}
getCompanyname()
//
// 调用echarts图
onMounted(() => {
    manageUser()
    productCategoryBar()
    massageLevel()
    massageAllDay()

})
// 管理员与用户比值图
const manageUser = () => {
    // 通过类名 初始化
    const mu = echarts.init(document.getElementById('manage-userpie'))
    // 设置基本的参数
    mu.setOption({
        animation:false,
       
        title: {
            text: '管理与用户权限对比图',
            // subtext: 'Fake Data',
            left: 'center'
        },
        textStyle: {
            color: '#2268AE'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            padding: [10, 20, 20, 0]
        },
        series: [
            {
                // name: 'Access From',
                type: 'pie',
                radius: '60%',
                data: [
                    { value: 1048, name: '超级管理' },
                    { value: 735, name: '产品管理' },
                    { value: 580, name: '用户管理' },
                    { value: 484, name: '普通用户' },

                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 20,
                        shadowOffsetY: 20,
                        shadowColor: 'rgba(0, 0, 0, 0.3)',
                  
                    }
                }

            }
        ],

    })
    // 用于echarts响应式
    window.addEventListener('resize', function () {
        mu.resize({
            animation: {
                duration: 2,
            }
        })
    })
}

// 产品类别图
const productCategoryBar = async () => {
    const pcb = echarts.init(document.getElementById('product-category-bar'))
    pcb.setOption({
        title: {
            text: "产品类别库存总价图",
            subtext: "比较",
            top: "0%",
            textStyle: {
                fontSize: 16
            },
        },
        tooltip: {
            trigger: 'axis',
        },
        xAxis: {
            type: 'category',
            // 食品类，服装类，鞋帽类，日用品类，家具类，家用电器类，纺织品类，五金类
            data: ['食品类', '服装类', '鞋帽类', '日用品类', '五金类']
        },
        yAxis: {
            type: 'value',
            position:'right',
          
        },
        series: [
            {
                data: [20000, 40000, 10000, 40000, 20000],
                type: 'bar',
                barWidth: 40,
                colorBy: "data",
         
            },
        ]
    })
    window.addEventListener('resize', function () {
        pcb.resize()
    })
}
// 公告等级分布图
const massageLevel = () => {
    const ml = echarts.init(document.getElementById('massage-level'))
    ml.setOption({
        title: {
            text: "公告等级分布图",
            top: "0%",
            textStyle: {
                fontSize: 16
            },
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '10%',
            left: 'center'
        },
        series: [
            {
                // name: 'Access From',
                type: 'pie',
                radius: ['25%', '55%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 6,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 10,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: 1048, name: '一般' },
                    { value: 735, name: '重要' },
                    { value: 735, name: '很重要' },

                ]
            }
        ]
    })
    window.addEventListener('resize', function () {
        ml.resize()
    })
}
// 消息每日总量图
const massageAllDay = () => {
    // // 底部日期的实现
    // let dd = new Date()
    // let week = []
    // for (let i = 1; i < 8; i++) {
    //     dd.setDate(dd.getDate() - 1)
    //     // 得到日期并且把斜杠替换成横杠
    //     week.push(dd.toLocaleDateString().replace(/\//g, "-"))
    // }

    // let number = []
    // week.forEach(async (e) => {
    //     // 如果在Moment中不加'YYYY-MM-DD'会提示警告
    //     let day = moment(e, 'YYYY-MM-DD').format('YYYY-MM-DD')
    //     // 调用每天登录人数的接口
    //     const res = await everydaynumberofpeople(day)
    //     number.push(res.number)
    // })
    const mad = echarts.init(document.getElementById('massage-all-day'))

    mad.setOption({
        title: {
            text: "每日登录人数图",
            top: "3%",
            textStyle: {
                fontSize: 16,

            },
        },
        tooltip: {
            trigger: 'item'
        },
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [150, 230, 224, 218, 135, 147, 260],
                type: 'line'
            }
        ]
    })
    window.addEventListener('resize', function () {
        mad.resize()
    })
}
//根据id判断权限，56最高
const quanxian = ref('')
// console.log(quanxian);
const adminRange = ref('')
// console.log(adminRange)
const panduan = () => {
    const id = localStorage.getItem('id')
    console.log(typeof id);
    if (id == '56') {
        quanxian.value = '最高权限'
        adminRange.value = '超级管理'
    } else {
        quanxian.value = '普通'
        adminRange.value = '普通管理'
    }
}

onMounted(() => {
    panduan()
})




</script>

<template>
    <div>
        <breadCrumb :item="item" :iconName="iconName" />
        <!-- 系统概览 -->

        <div class="overviewWarpped">
            <!-- 分三部分顶中下 -->
            <!-- 顶 -->
            <div class="top_content_warpped">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-card body-style="height:200px" shadow="hover">
                            <el-row :gutter="20">
                                <el-col :span="11">
                                    <el-col>
                                        <el-row :span="18" align="middle" justify="center">
                                            <el-avatar :size="80" :src="overStore.imageUrl" class="avatarRotate" /></el-row>
                                        <el-row :span="6" align="middle" justify="center">
                                            所属部门: <span>{{ overStore.department }}</span>
                                        </el-row>
                                        <el-row :span="6" align="middle" justify="center">
                                            所属公司：<span>{{ companyName }}</span>
                                        </el-row>
                                    </el-col>
                                </el-col>
                                <el-col :span="2"> <el-divider direction="vertical" style="height: 200px;" /></el-col>
                                <el-col :span="11" style="margin-top:5px ;">
                                    <el-row>
                                        姓名:<p>{{ overStore.name }}</p>
                                    </el-row>
                                    <el-row>
                                        性别：<p>{{ overStore.sex }}</p>
                                    </el-row>
                                    <el-row>
                                        身份：<p>{{ overStore.identity }}</p>
                                    </el-row>
                                    <el-row>
                                        分管领域： <p>{{ adminRange }}</p>
                                    </el-row>
                                    <el-row>
                                        权限： <p>{{ quanxian }}</p>
                                    </el-row>
                                </el-col>
                            </el-row>

                        </el-card>
                    </el-col>
                    <el-col :span="12">
                        <el-card body-style="height:200px" shadow="hover">
                            <!-- 管理员与用户比值饼状图pie -->
                            <div id="manage-userpie" style="height: 200px;width: 600px; margin: 0 auto;"></div>
                        </el-card>
                    </el-col>
                </el-row>

            </div>
            <!-- 中 -->
            <div class="mid_content_warpped">
                <el-row :gutter="20">
                    <el-col :span="14">
                        <el-card body-style="height:200px" shadow="hover">
                            <!-- 产品类别图 为了与产品类别饼状图区分 加了个bar代表柱状图 -->
                            <div id="product-category-bar"
                                style="height: 200px; width: 600px; margin: 0 auto; margin-top: 20px;"></div>
                        </el-card>
                    </el-col>
                    <el-col :span="10">
                        <el-card body-style="height:200px" shadow="hover">
                            <h2 style="font-weight: 600;">快速导航</h2>
                            <el-row>
                                <el-col :span="6">
                                    <div class="button_area">
                                        <SvgIcon iconName="user" :size="26" />
                                        <p>用户管理</p>
                                    </div>
                                </el-col>
                                <el-col :span="6">
                                    <div class="button_area">
                                        <SvgIcon iconName="user" :size="26" />
                                        <p>产品管理</p>
                                    </div>
                                </el-col> <el-col :span="6">
                                    <div class="button_area">
                                        <SvgIcon iconName="user" :size="26" />
                                        <p>系统消息</p>
                                    </div>
                                </el-col> <el-col :span="6">
                                    <div class="button_area">
                                        <SvgIcon iconName="user" :size="26" />
                                        <p>个人信息</p>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="6">
                                    <div class="button_area">
                                        <SvgIcon iconName="user" :size="26" />
                                        <p>部门信息</p>
                                    </div>
                                </el-col> <el-col :span="6">
                                    <div class="button_area">
                                        <SvgIcon iconName="user" :size="26" />
                                        <p>系统设置</p>
                                    </div>
                                </el-col>
                            </el-row>
                        </el-card>
                    </el-col>

                </el-row>
            </div>
            <!-- 下 -->
            <div class="bottom_content_warpped">
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-card body-style="height:200px" shadow="hover">
                            <!-- 消息等级图 -->
                            <div id="massage-level" style="height: 200px; width: 450px; margin: 0 auto;"></div>
                        </el-card>
                    </el-col>
                    <el-col :span="16">
                        <el-card body-style="height:200px" shadow="hover">
                            <!-- 消息每日总量图 -->
                            <div id="massage-all-day" style="height: 220px; width: 600px; margin: 0 auto;"></div>
                        </el-card>
                    </el-col>

                </el-row>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.overviewWarpped {
    padding: 10px;

    .top_content_warpped {
        margin-bottom: 10px;

        .avatarRotate:hover {
            /* transform 属性允许你旋转，缩放，倾斜或平移给定元素 */
            transform: rotate(666turn);
            /* 过渡 */
            transition-delay: 0s;
            transition-property: all;
            transition-duration: 60s;
            transition-timing-function: cubic-bezier(.4, 0, .84, 1);
            cursor: pointer;
        }
    }

    .mid_content_warpped {
        margin-bottom: 10px;

        .button_area {
            background-color: rgb(241, 238, 235);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin: 5px;
            width: 100%;
            height: 100%;

            p {
                margin-top: 10px;
            }

        }
    }

    .bottom_content_warpped {
        margin-bottom: 10px;

    }
}
</style>
<style>
.el-row {
    margin-bottom: 20px;
}

.el-row:last-child {
    margin-bottom: 0;
}

.el-col {
    border-radius: 4px;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}
</style>